vodpod.

com
A service for building, sharing and publishing collections of
videos

• Founded: Apr 2006

• Launched: Dec 2006
• Mark Hall, Scott Persinger, Spencer Miles
• Self-funded (raising a venture round)
• Technology: RoR, Apache, PostgreSQL, Softlayer
• http://geekblog.vodpod.com
• http://apps.facebook.com/vodpod-videos
• We're Hiring
widget
Facebook on Rails

● Port your app to facebook, using their

new F8 Platform
● 20,000,000+ facebook users
● Great way to increase exposure to your
web site
● iLike has signed up 3,000,000 users in a
few weeks
● http://apps.facebook.com/vodpod-videos
Ingredients

● Backend logic
– session management
● should be easier with RFacebook 0.6 (we use 0.5.1)
– app installation/removal
– linking facebook accounts to vod:pod user accounts
● Display logic
– Canvas Page (iframe or fbml)
– Facebook profile box
● News Feed
– post activity to a users news feed
Facebook on Rails

● App display consist of two main parts

– Canvas Page
● Can either be an iframe or fbml (facebook markup
language)
– Profile box
● must be FBML, no javascript support, limited mock-
ajax
Profile Box (fbml)
Canvas Page (iframe or
fbml)

● Facebook Canvas pages are presented within the

Facebook frame and can either be FBML or an external
html site presented within an iframe.
FBML vs. Iframe

● Need to decide whether your canvas page

will be FBML or Iframe based
● FBML
– Allows for basic HTML, and unique facebook
extension tags
● fb:friend-selector, fb:if-is-friends-with-viewer,
fb:tabs, fb:wallpost, etc...
– Makes it easier to provide a consistent
facebook look and feel
– No javascript support
– “Mock” Ajax support
FBML vs. Iframe

● Iframe
– Requests to the canvas page are redirected
to your app server, and displayed in an
iframe
– Pros
● Full html, css, javascript support
● Easy to port existing rails views
– Cons
● You need to write CSS to mimic facebook UI
● Handy FBML extensions like 'fb:friend-selector'
need to be written by hand
Setting up your App

● http://www.facebook.com/developers
– apply for new key
● Canvas Page URL
– Path on facebook where your app will live
– http://apps.facebook.com/vodpod-videos/
● Callback URL
– Path to the facebook app on your servers
– http://facebook.vodpod.com/facebook/
– Requests to the canvas URL will be redirected to the
callback URL
– apps.facebook.com/vodpod-videos/user/spencer ->
facebook.vodpod.com/facebook/user/spencer
RFacebook

● Vod:Pod uses rfacebook 0.5.1

– Minimal support for Facebook Platform
– vod:pod uses 0.5.1, rolled our own methods
for session management
● Rfacebook 0.6.1
– Contains support for the facebook platform
– Nice controller extensions for managing
facebook sessions, logins and app installation
● before_filter :require_facebook_login
● before_filter :require_facebook_install
● fbsession
App Installation

● User finds your app in directory, or on a

friends profile, and clicks “Add”
– User is prompted to give your app access to
their profile. Upon acceptance, your API key
has access to read/write this user profile
– User is then redirected to an “install”
callback URL of your choice
● At this we create a vod:pod User, linked to the
facebook account
● We have a 'facebook_uid' column on our users
Session Logic/Workflow

● User loads your canvas page for the first time

– Facebook GETs your canvas callback url, and passes
in an 'auth_token' parameter
– Vod:Pod App calls facebook API
(facebook.auth.getSession) with auth token.
Facebook returns session object.
def init_session
session[:facebook_session] ||= RFacebook::FacebookWebSession.new(API_KEY,
API_SECRET)

if params[:auth_token]
begin
session[:facebook_session].activate_with_token(params[:auth_token])
rescue RFacebook::FacebookSession::RemoteException => e
redirect_to session[:facebook_session].get_login_url
return false
end
end
end
Session Logic/Workflow,
Part 2
● User loads your canvas page, is already authenticated
and has session
– Vod:Pod looks up user with the FB uid.
– If user exists, sets as the current_user.
before_filter :fb_check_user

def fb_check_user
# Is the facebook session authenticated?
if @fb_session.session_uid
# lookup vodpod user
user = User.find_by_facebook_uid(@fb_session.session_uid)

if user
self.current_user = user
return
end
end

self.current_user = nil
session[:user] = nil
end
REST API

● Lots of methods for querying Facebook

● users.getInfo, friends.get,
feed.publishActionOfUser,
profile.setFBML, etc...
● RFacebook:
– Uses hpricot for parsing xml responses
user = fbsession.users_getInfo({:uids => [uid1, uid2, uid3], :fields => ['uid', 'name',
'pic_square']})

(response/'user').each do |user|
uid = user.at('uid').inner_html
name = user.at('name').inner_html
pic_url = user.at('pic_square').inner_html

puts “UID: #{uid} Name: #{name} Pic: #{pic_url}”

end
FQL

● Facebook Query Language.

– SQL like language for accessing FB data
– SELECT uid, name, pic_square FROM user WHERE uid IN (SELECT uid2
FROM friend WHERE uid1=211031 OR uid1=1309583)
– http://developers.facebook.com/documentation.php?v=1.0&method=fql.query

def get_uninvited_friends(uid)
response = fbsession.fql_query(
{:query => "SELECT uid, name, pic_square FROM user WHERE \
uid IN (SELECT uid2 FROM friend WHERE uid1=#{uid}) AND NOT is_app_user"})

return (response/'user').sort_by{|u| u.at('name').inner_html}

end
FacebookController

● See: http://www.livelearncode.com/archives/14
class FacebookController < ApplicationController
before_filter :require_facebook_login, :only => [:index]

# This will be your canvas page.

def index
attrs = get_user_attributes(fbsession.session_user_id, [”first_name”,
“last_name”])

@firstName = attrs[:first_name]
@lastName = attrs[:last_name]
end

private

def get_user_attributes(uid, attributes)

response = fbsession.users_getInfo(
{:uids => [uid], :fields => attributes})

attrs = {}
attributes.each {|key| attrs[key.to_sym] =
response.search(key.to_s)[0].inner_html}

attrs
end
end
Creating the Profile FBML
Block
Creating the Profile FBML
Block
● Call profile.setFBML, with the user_id to update, and the FBML.
● You need to do this whenever you want to update the profile
fbsession.profile_setFBML({:uid => fbsession.session_uid,
:markup => render_to_string(:partial => 'profile_fbml',
:locals => {:user => current_user})
})

The FBML:

<fb:title>Vod:Pod Videos</fb:title>
<fb:subtitle>
<fb:name uid="profileowner" firstnameonly="true" useyou="false"/> has
collected <%= pluralize(user.facebook_pod.videos_count, 'video') %>.
</fb:subtitle>

<% videos = user.facebook_pod.recent_videos(6) %>

<div style="margin-left:30px;">
<% videos.each do |video| %>
<%= link_to image_tag(video.thumbnail_url), video_url(video) %>
<% end %>
</div>
Invite Friends to use App

def invite
if request.post?
begin
response = fbsession.notifications_sendRequest(
{:to_ids => params[:facebook_uids],
:type => 'Vod:Pod',
:content => “FBML for the request message”,
:image => 'http://www.vodpod.com/images/vodpod_square.gif',
:invite => false})
rescue Exception => e
return render :text => “error”, :content_type => 'text/plain'
end

confirm_url = CGI.unescapeHTML ((response/'notifications_sendrequest_response').inner_html)

redirect_to "#{confirm_url}&canvas"
else
render :action => 'invite'
end
end
Essential for Iframe apps
Post to User's News Feed

def post_feed_item(title)
begin
fbsession.feed_publishActionOfUser({:uid =>
fbsession.session_uid, :title => title})
rescue Exception => e
log "FACEBOOK: Couldn't post comment to news feed: #{e}"
end
end

post_feed_item "added video #{profile_video_link(groupvideo)}"

Problems

● Asynchronously posting to user's news

feed or profile
– Facebook allows for “infinite sessions”, but a
user has to explicity sign up for the infinite
session, which can't be counted on
● Facebook not adding new apps to the
directory
Resources

● http://developers.facebook.com
– API docs, FBML docs, API test console (crappy and limited),
FBML test console, Wiki
● http://www.facebook.com/developers
– Completely different than developers.facebook.com – GREAT!
– Discussion forum
– Create/administer your applications here
● http://www.livelearncode.com/archives/14
– Rfacebook documentation
● http://geekblog.vodpod.com
– This presentation